<script setup>
import {
  postLoginWxMinSimpleAPI,
  postLoginWxMinAPI,
  profileAPI,
} from '@/api/login'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const memberStore = useMemberStore()

const isChecked = ref(false)
const sessionKey = ref('')
onLoad(async () => {
  const { code } = await uni.login()
  /*
  const { userInfo } = await uni.getUserInfo()
  sessionKey.value = res.data.session_key
  */

  const res = await postLoginWxMinAPI({ code })
  console.log(res,'1111');
  loginSuccess({ ...res.data })
  getProfile()
})

// 获取用户信息
const getProfile = async () => {
  const res = await profileAPI()
  loginSuccess({
    ...memberStore.profile,
    ...res.data,
    roleGroup: res.roleGroup,
  })
}

// 获取用户手机号码
const onGetphonenumber = async (ev) => {
  const { errMsg, code, encryptedData, iv } = ev.detail
  if (!encryptedData) {
    return
  }
  if (!isChecked.value) {
    return uni.showToast({ icon: 'none', title: '请勾选用户协议/隐私政策' })
  }
  await getProfile()
  // 成功提示
  uni.showToast({ icon: 'success', title: '登录成功' })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}

// 手机号码一键登录(静默登录)
const onGetphonenumberSimple = async () => {
  const res = await postLoginWxMinSimpleAPI('13123456789')
  loginSuccess(res.result)
}

const loginSuccess = (profile) => {
  memberStore.setProfile(profile)
}

const handleCheck = () => {
  isChecked.value = !isChecked.value
}

const toPage = (value) => {
  console.log(value)
}

// 手机号脱敏
const maskPhoneNumber = (phoneNumber) => {
  if (!phoneNumber) return
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
</script>

<template>
  <view class="viewport">
    <view class="logo">
      <image
        src="https://img.js.design/assets/img/66938f83f6dd0ba6b55904fb.png#61187c96006186c1edc67a79419ffb0b"
        mode="aspectFill"
      />
    </view>
    <view class="login">
      <view class="phone-num">{{
        maskPhoneNumber(memberStore?.profile?.phonenumber) || '****'
      }}</view>
      <!-- 通用模拟登录 
        @tap="onGetphonenumberSimple" -->
      <!-- 手机号快捷登录
        open-type="getPhoneNumber"
        @getphonenumber="onGetphonenumber" 
       -->
      <button
        class="phone-btn"
        open-type="getPhoneNumber"
        @getphonenumber="onGetphonenumber"
      >
        本机号码一键登录
      </button>
      <view class="tips" @click="handleCheck">
        <view class="select-view" :class="isChecked ? 'active' : ''">
          <image
            src="../../static/images/common/select-bold.png"
            mode="widthFix"
          />
        </view>
        勾选即视为您同意
        <view style="color: #ea5506" @click.stop="toPage(1)">《用户协议》</view>
        和
        <view style="color: #ea5506" @click.stop="toPage(2)">《隐私政策》</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}

.viewport {
  background: #f5f5f5;
  height: 100%;
  padding: 0 60rpx 120rpx;
}

.logo {
  text-align: center;
  image {
    width: 526rpx;
    height: 144rpx;
    margin-top: 260rpx;
  }
}

.login {
  .phone-num {
    margin: 140rpx 0 90rpx;
    text-align: center;
    color: #000000;
    font-size: 52rpx;
    font-weight: 500;
  }
  .phone-btn {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-radius: 10px;
    background: #ea5506;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
  }
}

.tips {
  position: absolute;
  bottom: 120rpx;
  left: 30rpx;
  right: 40rpx;
  font-size: 24rpx;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;

  .select-view {
    margin-right: 12rpx;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 32rpx;
    height: 32rpx;
    padding-bottom: 2rpx;
    background: #c2c2c2;
    border-radius: 50%;
    image {
      width: 80%;
    }
  }

  .active {
    background: #ea5506;
  }
}
</style>
